<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import LifeCycle from './components/LifeCycle.vue'
import UseProvide from "./components/ProvideInject/UseProvide.vue";
import RefParent from './components/RefChild/RefParent.vue';
import LifeParent from './components/LifeCircle/LifeParent.vue';
import { computed, onErrorCaptured, ref } from 'vue';

const tab = ref<string>("LifeCycle");

const tabComponent = computed(() => {
  return {
    TheWelcome,
    LifeCycle,
    UseProvide,
    RefParent,
    LifeParent
  }[tab.value]
})

// 可以捕获到子孙组件发生的错误
// 只能捕获setup、watch等特定函数中的发生的错误
onErrorCaptured(() => {
  console.log("子组件中发生了错误");
});
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <select v-model="tab">
        <option value="LifeCycle">LifeCycle</option>
        <option value="TheWelcome">TheWelcome</option>
        <option value="UseProvide">UseProvide</option>
        <option value="RefParent">RefParent</option>
        <option value="LifeParent">LifeParent</option>
      </select>
    </div>
  </header>

  <main>
    <!-- <TheWelcome v-if="tab === 'TheWelcome'" />
    <KeepAlive>
      <LifeCycle v-if="tab === 'LifeCycle'" />
    </KeepAlive>
    <UseProvide v-if="tab === 'UseProvide'" />
    <RefParent v-if="tab === 'RefParent'" />
    <LifeParent v-if="tab === 'LifeParent'" /> -->
    <Component :is="tabComponent" />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
